import styles from '@/pages/main/index.less';
import Block from '@/pages/main/components/Block';
import { useEffect, useRef } from 'react';
import echarts from 'echarts';
import { getColor } from '@/utils';
import Progress from './Progress';
import Title from '@/pages/main/components/Title';

const scaleBase = window.scaleBase;
const colorMap = ['#0066ff', '#20F1DB', '#ffb325', '#F15151', '#4656bf' ];

const RightTop = props => {
  const { data } = props;
  const statisticChart = useRef();
  const warningChart = useRef();
  // const keyDataChart = useRef();

  const renderStatisticChart = () => {
    const { statistics } = data;
    const { total, done } = statistics;
    const percent = total > 0 ? done / total : 0;

    const option = {
      series: [
        {
          type: 'gauge',
          axisLine: {
            lineStyle: {
              color: [[percent, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#116389'
              }, {
                offset: 1,
                color: 'rgb(44, 253, 255)'
              }])], [1, '#0A3565']],
              width: 10 * scaleBase,
            }
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          detail: {
            offsetCenter: [0, 0],
            formatter: (value) => {
              return `{a|${Math.floor(value*100)}}{b|%}`
            },
            rich: {
              a: {
                color: 'rgb(44, 253, 255)',
                fontSize: 24 * scaleBase
              },
              b: {
                color: 'rgb(44, 253, 255)',
                fontSize: 12 * scaleBase
              },
            },
          },
          data: [{value: percent, name: ''}]
        }
      ]
    };
    statisticChart.current.setOption(option);
  }

  const renderWarningChart = () => {
    const { chart } = data;
    const { exceed, delay, high_speed, low_speed } = chart;

    const option = {
      grid: {
        left: 35 * scaleBase,
        bottom: 20 * scaleBase,
        top: 10 * scaleBase,
        right: 30 * scaleBase,
      },
      xAxis: {
        data: ['超区域', '延误', '超速', '怠速'],
        axisLabel: {
          margin: 6 * scaleBase,
          textStyle: {
            color: '#fff',
            fontSize: 10 * scaleBase,
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        z: 10
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 6 * scaleBase,
          textStyle: {
            color: '#fff',
            fontSize: 10 * scaleBase,
          }
        },
        splitLine: {
          lineStyle: {
            color: '#283246',
            width: scaleBase
          }
        },
      },
      series: [
        {
          type: 'bar',
          barWidth: '50%',
          itemStyle: {
            color: ({dataIndex}) => {
              return new echarts.graphic.LinearGradient(
                0, 1, 0, 0,
                [
                  {offset: 0, color: getColor(colorMap[dataIndex], 0.1)},
                  {offset: 1, color: colorMap[dataIndex]}
                ]
              )
            }
          },
          data: [exceed, delay, high_speed, low_speed]
        }
      ]
    }
    warningChart.current.setOption(option);
  }

  // const renderKeyDataChart = () => {
  //   const { keyData = [] } = data;
  //   const xData = keyData.map(({month}) => `${month}月`);
  //   const storage = keyData.map(({storage}) => storage);
  //   const box = keyData.map(({box}) => box);
  //
  //   const option = {
  //     color: colorMap.slice(0, 2),
  //     grid: {
  //       left: 35 * scaleBase,
  //       bottom: 15 * scaleBase,
  //       top: 20 * scaleBase,
  //       right: 30 * scaleBase,
  //     },
  //     legend: {
  //       data: ['商业库存', '单箱'],
  //       left: 40 * scaleBase,
  //       // top: 0,
  //       selectedMode: false,
  //       textStyle: {
  //         fontSize: 10 * scaleBase,
  //         color: '#fff',
  //       }
  //     },
  //     xAxis: {
  //       data: xData,
  //       axisLabel: {
  //         margin: 6 * scaleBase,
  //         textStyle: {
  //           color: '#fff',
  //           fontSize: 10 * scaleBase,
  //         }
  //       },
  //       axisTick: {
  //         show: false
  //       },
  //       axisLine: {
  //         show: false
  //       },
  //       z: 10
  //     },
  //     yAxis: [{
  //       name: '商业库存',
  //       axisLine: {
  //         show: false
  //       },
  //       axisTick: {
  //         show: false
  //       },
  //       axisLabel: {
  //         margin: 6 * scaleBase,
  //         textStyle: {
  //           color: '#fff',
  //           fontSize: 10 * scaleBase,
  //         }
  //       },
  //       splitLine: {
  //         show: false
  //       },
  //     },{
  //       name: '单箱',
  //       axisLine: {
  //         show: false
  //       },
  //       axisTick: {
  //         show: false
  //       },
  //       axisLabel: {
  //         margin: 6 * scaleBase,
  //         textStyle: {
  //           color: '#fff',
  //           fontSize: 10 * scaleBase,
  //         }
  //       },
  //       splitLine: {
  //         lineStyle: {
  //           color: '#283246',
  //           width: scaleBase
  //         }
  //       },
  //       position: 'right',
  //     }],
  //     series: [
  //       {
  //         name: '商业库存',
  //         type: 'bar',
  //         barWidth: '25%',
  //         label: {
  //           show: true,
  //           position: 'top',
  //           fontSize: 10 * scaleBase,
  //           color: '#fff',
  //         },
  //         itemStyle: {
  //           color: () => {
  //             return new echarts.graphic.LinearGradient(
  //               0, 1, 0, 0,
  //               [
  //                 {offset: 0, color: getColor(colorMap[0], 0.1)},
  //                 {offset: 1, color: colorMap[0]}
  //               ]
  //             )
  //           }
  //         },
  //         data: storage
  //       },
  //       {
  //         name: '单箱',
  //         type: 'bar',
  //         barWidth: '25%',
  //         yAxisIndex: 1,
  //         label: {
  //           show: true,
  //           position: 'top',
  //           fontSize: 10 * scaleBase,
  //           color: '#fff',
  //         },
  //         itemStyle: {
  //           color: ({dataIndex}) => {
  //             return new echarts.graphic.LinearGradient(
  //               0, 1, 0, 0,
  //               [
  //                 {offset: 0, color: getColor(colorMap[1], 0.1)},
  //                 {offset: 1, color: colorMap[1]}
  //               ]
  //             )
  //           }
  //         },
  //         data: box
  //       },
  //     ]
  //   }
  //   keyDataChart.current.setOption(option);
  // }

  const renderChart = () => {
    renderStatisticChart();
    renderWarningChart();
    // renderKeyDataChart();
  }

  const renderTop = () => {
    return <div className={styles.rightTopChart}>
      <div className={styles.rightTopChartLeft}>
        <div>
          <div id={'right-top-statistic-chart'} className={styles.chart}/>
          <h5>完成率</h5>
        </div>
        <div className={styles.rightTopChartLeftInfo}>
          <div>
            <h4>{data?.statistics?.done}</h4>
            <h3>已配送订单数</h3>
          </div>
          <div>
            <h4>{data?.statistics?.total}</h4>
            <h3>总配送订单数</h3>
          </div>
        </div>
      </div>
      <div className={styles.rightTopChartRight}>
        <div id={'right-top-warning-chart'} className={styles.chart}/>
      </div>
    </div>

  }

  const renderCarList = () => {
    const { carList = [] } = data || {};

    const percentColor = (p) => {
      if (p > 80) return undefined;
      if (p > 50) return '#ffb325';
      return '#F15151';
    }

    return <div className={styles.rightTopCarList}>
      {
        carList.map(({id, name, percent}) => (
          <div className={styles.rightTopCarItem} key={id}>
            <span>{name}</span>
            <div><Progress percent={percent} color={percentColor(percent)}/></div>
            {/*<div><Progress percent={percent}/></div>*/}
            <em>{percent}%</em>
          </div>
        ))
      }
    </div>
  }
  const renderKeyData = () => {
    const today = new Date()
    return <div className={styles.rightTopKeyData}>
      <h2><Title>关键指标</Title></h2>
      <div>
        {/*<div id={'right-top-key-data-chart'} className={styles.chart}/>*/}
        <table className={styles.table}>
          <thead>
            <tr>
              <th rowSpan={2}>销量目标</th>
              {/*<th rowSpan={2}>销量进度</th>*/}
              <th colSpan={4}>1.1-{today.format('M.d')} 累计销量（箱）</th>
              <th colSpan={4}>1.1-{today.format('M.d')} 累计单箱（元）</th>
            </tr>
            <tr>
              <th>{today.getFullYear()}年</th>
              <th>{today.getFullYear() - 1}年</th>
              <th>增减</th>
              <th>增幅</th>
              <th>{today.getFullYear()}年</th>
              <th>{today.getFullYear() - 1}年</th>
              <th>增减</th>
              <th>增幅</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>44800</td>
              {/*<td>74.77%</td>*/}
              <td>33499</td>
              <td>32542</td>
              <td>957</td>
              <td>2.94%</td>
              <td>29489</td>
              <td>29227</td>
              <td>262</td>
              <td>0.90%</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  }
  const renderBody = () => {
    return <div className={styles.rightTopWrapper}>
      {renderTop()}
      {renderCarList()}
      {renderKeyData()}
    </div>
  }

  useEffect(()=> {
    statisticChart.current = echarts.init(document.getElementById('right-top-statistic-chart'));
    warningChart.current = echarts.init(document.getElementById('right-top-warning-chart'));
    // keyDataChart.current = echarts.init(document.getElementById('right-top-key-data-chart'));
  }, []);

  useEffect(()=> {
    data && renderChart();
  });

  return <Block
    containerClassName={styles.rightTop}
    title={'配送进度统计'}
    body={renderBody()}
  />
}

export default RightTop;
